<template>
  <div style="border: solid 20px rgb(245, 247, 249)">
    <Button
      style="color: aliceblue; margin: 20px"
      icon="ivu-icon ivu-icon-md-add"
      type="primary"
      @click="$router.push('./addList')"

      >新增</Button
    >
    <Table border :columns="columns" :data="data">
      <template #name="{ row }">
        <strong>{{ row.name }}</strong>
      </template>
      <template #pre_price="{ row }">
        <strong>{{ (row.pre_price / 100).toFixed(2) }}</strong>
      </template>
      <template #price="{ row }">
        <strong>{{ (row.price / 100).toFixed(2) }}</strong>
      </template>
      <template #action="{ index }">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index)"
          >修改</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Page :modelValue="1" :total="data.length" simple page-size="5" />
  </div>
  <!-- 弹出内容添加 -->
  <Modal
    v-model="modal"
    title="新增管理员"
    :loading="loading"
    @on-ok="asyncOK(true)"
    class="inp1"
  >
  商品名:<Input
      v-model="this.dates.keywords"
      placeholder="分类名称"
      style="width: 420px; margin: 10px;"
    />
    商品详情:<Input
      v-model="dates.name"
      placeholder="排序"
      style="width: 405px; margin: 10px;"
    />
    优惠:<Input
      v-model="dates.goods_desc"
      placeholder="排序"
      style="width: 432px; margin: 10px;"
    />
    原价:<Input
      v-model="dates.pre_price"
      placeholder="排序"
      style="width: 432px; margin: 10px;"
    />
    优惠价:<Input
      v-model="dates.price"
      placeholder="排序"
      style="width: 415px; margin: 10px;"
    />
    备注:<Input
      v-model="dates.seller_note"
      placeholder="排序"
      style="width: 432px; margin: 10px;"
    />
    添加时间:<Input
      v-model="dates.add_date"
      placeholder="排序"
      style="width: 400px; margin: 10px;"
    />
    <Ipload @getUrl="zz"></Ipload>
  </Modal>
</template>
  <script>
import { list, add, del } from "../../Api/goodsList.js";
import Ipload from "../../components/Upload.vue";
export default {
  components: { Ipload },
  created() {
    this.qq();
  },
  data() {
    return {
      modal: false,
      columns: [
        {
          title: "商品名",
          key: "keywords",
        },
        {
          title: "商品详情",
          key: "name",
        },
        {
          title: "id",
          key: "_id",
        },
        {
          title: "主图",
          key: "goods_thumb",
          // width: 200,
          render: (h, params) => {
            return h("img", {
              src: params.row.goods_thumb,
              style: {
                width: "100px",
                height: "120px",
              },
            });
          },
        },
        {
          title: "优惠",
          key: "goods_desc",
        },
        {
          title: "原价",
          key: "pre_price",
          slot: "pre_price",
        },
        {
          title: "优惠价",
          key: "price",
          slot: "price",
        },
        {
          title: "备注",
          key: "seller_note",
        },
        {
          title: "添加时间",
          key: "add_date",
        },

        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data: [],
      dates: {
        keywords: "",
        name: "",
        goods_thumb: "",
        goods_desc: "",
        pre_price: "",
        price: "",
        seller_note:"",
        add_date:""
      },
    };
  },
  methods: {
    // 封装
    qq() {
      list().then((res) => {
        // console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          this.data[i] = res.data.data[i];
        }
        this.zz();
      });
    },

    zz(i) {
      // console.log(i);
      this.dates.goods_thumb = i;
      //   this.dates.length
      // console.log(this.data.goods_thumb);
    },
    asyncOK() {
      add({
        keywords: this.dates.keywords,
        name: this.dates.name,
        goods_thumb: this.dates.goods_thumb,
        goods_desc: this.dates.goods_desc,
        pre_price: this.dates.pre_price,
        price: this.dates.price,
        seller_note: this.dates.seller_note,
        add_date: this.dates.add_date,
      }).then((res) => {
        // console.log(res);
      });
      this.qq();
    },
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name:${this.data[index].name}<br>sort:${this.data[index].sort}<br>url:${this.data[index].url}`,
      });
    },
    remove(index) {
      // console.log(this.data);
      // console.log(index);
      del(this.data[index]._id).then((res) => {
        // console.log(res);
      });
    this.data.splice(index, 1);
    },
    zz(strDate) {
      // console.log(this.data);
      for (let i = 0; i < this.data.length; i++) {
        var date = new Date(this.data[i].add_date);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        var m =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        var s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var strDate = Y + M + D + h + m + s;
        // console.log("输出内容:", strDate);
        this.data[i].add_date = strDate;
      }
    },
  },
};
</script>